<template>
  <view class="invoice-management-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">发票管理</view>
      <view class="header-subtitle">申请、下载电子发票</view>
    </view>

    <!-- 发票统计 -->
    <view class="invoice-stats">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.totalInvoices }}</text>
          <text class="stat-label">总发票数</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.pendingCount }}</text>
          <text class="stat-label">待开具</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.issuedCount }}</text>
          <text class="stat-label">已开具</text>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="quick-actions">
      <view class="section-title">
        <text class="title-text">快速操作</text>
      </view>
      
      <view class="action-grid">
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="action-item"
          @click="performAction(action)"
        >
          <view class="action-icon" :style="{ background: action.color }">
            <u-icon :name="action.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="action-name">{{ action.name }}</text>
        </view>
      </view>
    </view>

    <!-- 待开具发票 -->
    <view class="pending-invoices">
      <view class="section-title">
        <text class="title-text">待开具发票</text>
        <text class="title-count">({{ pendingInvoices.length }})</text>
      </view>
      
      <view class="invoice-list">
        <view 
          v-for="invoice in pendingInvoices" 
          :key="invoice.id" 
          class="invoice-item"
          @click="goToInvoiceDetail(invoice)"
        >
          <view class="invoice-icon" :style="{ background: invoice.iconColor }">
            <u-icon :name="invoice.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="invoice-info">
            <view class="invoice-header">
              <text class="invoice-title">{{ invoice.title }}</text>
              <text class="invoice-amount">¥{{ invoice.amount.toFixed(2) }}</text>
            </view>
            <view class="invoice-details">
              <text class="invoice-type">{{ invoice.type }}</text>
              <text class="invoice-date">{{ invoice.payDate }}</text>
            </view>
            <view class="invoice-status">
              <u-tag 
                :text="invoice.statusText" 
                type="warning" 
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="invoice-action">
            <u-button 
              :text="invoice.actionText" 
              size="mini" 
              type="primary"
              @click="applyInvoice(invoice)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近发票 -->
    <view class="recent-invoices">
      <view class="section-title">
        <text class="title-text">最近发票</text>
        <text class="view-all" @click="viewAllInvoices">查看全部</text>
      </view>
      
      <view class="invoice-list">
        <view 
          v-for="invoice in recentInvoices" 
          :key="invoice.id" 
          class="invoice-item"
          @click="viewInvoiceDetail(invoice)"
        >
          <view class="invoice-icon" :style="{ background: invoice.iconColor }">
            <u-icon :name="invoice.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="invoice-info">
            <view class="invoice-header">
              <text class="invoice-title">{{ invoice.title }}</text>
              <text class="invoice-amount">¥{{ invoice.amount.toFixed(2) }}</text>
            </view>
            <view class="invoice-details">
              <text class="invoice-number">{{ invoice.invoiceNumber }}</text>
              <text class="invoice-date">{{ invoice.issueDate }}</text>
            </view>
            <view class="invoice-status">
              <u-tag 
                :text="invoice.statusText" 
                type="success" 
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="invoice-action">
            <u-button 
              :text="'下载'" 
              size="mini" 
              type="info"
              @click="downloadInvoice(invoice)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 发票管理页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 发票管理功能页面，包含发票申请、下载、历史记录等
 */

import { ref, reactive, onMounted } from 'vue'

// 发票统计
const stats = reactive({
  totalInvoices: 25,
  pendingCount: 3,
  issuedCount: 22
})

// 快速操作
const quickActions = ref([
  {
    id: 1,
    name: '申请发票',
    icon: 'plus',
    color: '#2d8cf0'
  },
  {
    id: 2,
    name: '批量申请',
    icon: 'list',
    color: '#19be6b'
  },
  {
    id: 3,
    name: '发票设置',
    icon: 'setting',
    color: '#ff9900'
  },
  {
    id: 4,
    name: '帮助说明',
    icon: 'question-circle',
    color: '#9c26b0'
  }
])

// 待开具发票
const pendingInvoices = ref([
  {
    id: 1,
    title: '2025年1月物业费',
    amount: 150.00,
    type: '物业费',
    payDate: '2025-01-15',
    statusText: '待开具',
    actionText: '申请发票',
    icon: 'home',
    iconColor: '#3742fa'
  },
  {
    id: 2,
    title: '2024年12月停车费',
    amount: 80.00,
    type: '停车费',
    payDate: '2024-12-25',
    statusText: '待开具',
    actionText: '申请发票',
    icon: 'car',
    iconColor: '#2ed573'
  },
  {
    id: 3,
    title: '2024年12月水电费',
    amount: 120.50,
    type: '水电费',
    payDate: '2024-12-28',
    statusText: '待开具',
    actionText: '申请发票',
    icon: 'flash',
    iconColor: '#ff9500'
  }
])

// 最近发票
const recentInvoices = ref([
  {
    id: 1,
    title: '2024年11月物业费',
    amount: 150.00,
    invoiceNumber: 'FP202411001',
    issueDate: '2024-12-01',
    statusText: '已开具',
    icon: 'home',
    iconColor: '#3742fa'
  },
  {
    id: 2,
    title: '2024年11月停车费',
    amount: 80.00,
    invoiceNumber: 'FP202411002',
    issueDate: '2024-12-01',
    statusText: '已开具',
    icon: 'car',
    iconColor: '#2ed573'
  },
  {
    id: 3,
    title: '2024年10月物业费',
    amount: 150.00,
    invoiceNumber: 'FP202410001',
    issueDate: '2024-11-01',
    statusText: '已开具',
    icon: 'home',
    iconColor: '#3742fa'
  }
])

// 页面跳转方法
const performAction = (action) => {
  switch (action.id) {
    case 1:
      uni.navigateTo({ url: '/pages/payment/apply-invoice' })
      break
    case 2:
      uni.navigateTo({ url: '/pages/payment/batch-apply' })
      break
    case 3:
      uni.navigateTo({ url: '/pages/payment/invoice-settings' })
      break
    case 4:
      uni.navigateTo({ url: '/pages/payment/invoice-help' })
      break
  }
}

const goToInvoiceDetail = (invoice) => {
  uni.navigateTo({
    url: `/pages/payment/invoice-detail?id=${invoice.id}&type=pending`
  })
}

const applyInvoice = (invoice) => {
  uni.showToast({
    title: `申请${invoice.title}发票`,
    icon: 'none'
  })
}

const viewInvoiceDetail = (invoice) => {
  uni.navigateTo({
    url: `/pages/payment/invoice-detail?id=${invoice.id}&type=issued`
  })
}

const downloadInvoice = (invoice) => {
  uni.showToast({
    title: `下载${invoice.title}发票`,
    icon: 'none'
  })
}

const viewAllInvoices = () => {
  uni.navigateTo({
    url: '/pages/payment/invoice-list'
  })
}

// 页面加载
onMounted(() => {
  loadInvoiceData()
})

// 数据加载方法
const loadInvoiceData = async () => {
  try {
    console.log('加载发票数据')
  } catch (error) {
    console.error('加载发票数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.invoice-management-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px 0;
  
  .header-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 14px;
    color: #666;
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
  
  .title-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .title-count {
    font-size: 14px;
    color: #999;
  }
  
  .view-all {
    font-size: 14px;
    color: #2d8cf0;
    cursor: pointer;
  }
}

.invoice-stats,
.quick-actions,
.pending-invoices,
.recent-invoices {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #9b59b6;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .action-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .action-name {
      font-size: 12px;
      color: #333;
      text-align: center;
    }
  }
}

.invoice-list {
  .invoice-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .invoice-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .invoice-info {
      flex: 1;
      min-width: 0;
      
      .invoice-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .invoice-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .invoice-amount {
          font-size: 18px;
          font-weight: 700;
          color: #ff4757;
        }
      }
      
      .invoice-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .invoice-type,
        .invoice-date,
        .invoice-number {
          font-size: 12px;
          color: #666;
        }
      }
      
      .invoice-status {
        display: flex;
        justify-content: flex-start;
      }
    }
    
    .invoice-action {
      margin-left: 16px;
    }
  }
}
</style>
